<template>
  <a-modal
    v-model:open="open"
    :afterClose="resetForm"
    :confirmLoading="confirmLoading"
    :title="title"
    :width="480"
    @ok="handleOk"
  >
    <a-spin :spinning="confirmLoading">
      <a-form
        ref="formRef"
        :labelCol="labelCol"
        :model="formState"
        :rules="rules"
        @keyup.enter.passive="handleOk"
      >
        <a-form-item
          label="网关号"
          name="imei"
        >
          <a-input
            :value="formState.imei"
            disabled
          />
        </a-form-item>
        <a-form-item
          label="IP地址"
          name="ip"
        >
          <a-input
            v-model:value="formState.ip"
            placeholder="请输入"
            allowClear
          />
        </a-form-item>
        <a-form-item
          label="端口"
          name="port"
        >
          <a-input-number
            v-model:value="formState.port"
            placeholder="请输入"
            allowClear
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup>
import { useBoolean } from '@/hooks/index.js'
import { message } from 'ant-design-vue'
import Service from '@/utils/service.js'

const title = '更新网关配置'
const [open, toggleOpen] = useBoolean()
const [confirmLoading, toggleConfirmLoading] = useBoolean()

const labelCol = {
  span: 4,
}

const form = {
  imei: '',
  ip: '',
  port: '',
}
const formRef = ref()
let formState = reactive({ ...form })

const validateIP = (_, value) => {
  const ipv4Pattern = /^(?:(?:25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})\.){3}(?:25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})$/
  if (!ipv4Pattern.test(value)) {
    return Promise.reject('请输入合法的IP地址！')
  }
  return Promise.resolve()
}
const validatePort = (_, value) => {
  const portPattern = /^(0|([1-9]\d{0,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d)|6553[0-5])$/
  if (!portPattern.test(value)) {
    return Promise.reject('请输入合法的端口号！')
  }
  return Promise.resolve()
}
const rules = {
  imei: [
    {
      required: true,
    },
  ],
  ip: [
    {
      required: true,
      validator: validateIP,
      trigger: 'blur',
    },
  ],
  port: [
    {
      required: true,
      validator: validatePort,
      trigger: 'blur',
    },
  ],
}

const handleUpdate = record => {
  formState.imei = record.imei
  toggleOpen(true)
}

const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      postFormState()
    })
    .catch(error => {})
}

const resetForm = () => {
  formState = reactive({ ...form })
  formRef.value.resetFields()
}

const emit = defineEmits(['modalOk'])
const postFormState = async () => {
  toggleConfirmLoading()
  const { code, msg } = await Service.postAction('/gateway/update', toRaw(formState))
  toggleConfirmLoading()
  if (code === 200) {
    toggleOpen(false)
    message.success('更新网关成功！')
    emit('modalOk')
  } else {
    message.error(msg)
  }
}

defineExpose({ handleUpdate })
</script>

<style lang="scss" scoped>
.account {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  &-input {
    width: calc(50% - 10px);
  }

  &-icon {
    color: #999;
    margin-left: 10px;

    &:hover {
      color: #777;
    }
  }
}
</style>
